<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <div class="cms-btn-group">
                        <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                        <el-button type="success" title="按开始日期和结束日期导出数据" icon="fa fa-file-excel-o" @click="imports()" size="small"> 导出</el-button>
                        <el-button type="success" title="下载上个月的数据" icon="fa fa-download" @click="download()" size="small"> 下载</el-button>
                    </div>
                    <div class="cms-search-group">
                        <div class="cms-search-item" style="width: 315px">
                            <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入标题或者联系人或者联系方式" class="input-with-select">
                                <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                        <div class="cms-search-item" style="width: 135px">
                            <el-select size="medium" v-model="params.job">
                                <el-option label="部门(全部)" value=""></el-option>
                                <el-option v-for="(job,index) in jobs" :key="index" :label="job"
                                           :value="job"></el-option>
                            </el-select>
                        </div>
                        <div class="cms-search-item" style="width: 135px">
                            <el-select size="medium" v-model="params.repair">
                                <el-option label="维修员(全部)" value=""></el-option>
                                <el-option v-for="(repair,index) in repairsArr" :key="index" :label="repair.username"
                                           :value="repair.openid"></el-option>
                            </el-select>
                        </div>
                        <div class="cms-search-item" style="width: 135px;margin-right: 215px">
                            <el-date-picker size="medium"
                                            v-model="dateTime"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <el-table ref="multipleHandle"
                              v-loading="loading"
                              element-loading-text="努力加载中..."
                              element-loading-spinner="el-icon-loading"
                              tooltip-effect="dark" :data="listData.data"  border>
                        <el-table-column align="center" prop="created_at" label="日期" width="100">
                            <template slot-scope="scope">{{ scope.row.created_at ? moment(scope.row.created_at).format('YYYY-MM-DD') : ''}}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="order_id" label="编号" width="170"></el-table-column>
                        <el-table-column prop="title" label="标题" :show-overflow-tooltip="true" width="200"></el-table-column>
                        <el-table-column align="center" prop="user_plain_name" label="联系人" width="80"></el-table-column>
                        <el-table-column align="center" prop="user_plain_mobile" label="联系方式" width="110"></el-table-column>
                        <el-table-column align="center" prop="job" label="部门" width="150"></el-table-column>
                        <el-table-column prop="user_plain_address" label="详细地址" :show-overflow-tooltip="true" width="180"></el-table-column>
                        <el-table-column align="center" prop="user_repair_name" label="维修员" width="160">
                            <template slot-scope="scope">
                                <span v-if="scope.row.user_repair_name">{{scope.row.user_repair_name}}({{scope.row.user_repair_mobile}})</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="money" label="费用(元)" width="80"></el-table-column>
                        <el-table-column align="center" prop="status_text" label="状态" width="80">
                            <template slot-scope="scope">
                                <span v-html="scope.row.status_text"></span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" >
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.status == 1" @click="edit(scope.row.id)" icon="fa fa-send" type="primary" size="mini" plain> 分发</el-button>
                                <el-button v-else-if="scope.row.status == 3" @click="edit(scope.row.id)" icon="fa fa-heart" type="danger" size="mini" plain> 审核</el-button>
                                <el-button v-else-if="scope.row.status == 5" @click="edit(scope.row.id)" icon="fa fa-heart" type="danger" size="mini" plain> 确认</el-button>
                                <el-button v-else @click="edit(scope.row.id)" icon="fa fa-eye" type="primary" size="mini" plain> 查看</el-button>
                                <el-button @click="destory(scope.row.id)" icon="fa fa-trash" type="danger" size="mini" plain> 删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination :pageData="listData" :params="params" @list="list"/>
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {OrderList,OrderDestroy,UserRepairs} from '@/utils/request';
    import Pagination from '@/components/pagination';
    export default {
        components: {Pagination},
        data() {
            return {
                listData: [],//列表数据
                params: {page:1,kwd:'',repair:'',job:'',start:'',stop:''},
                repairsArr:[],
                jobs:['安全监察质量部','建设部','电力调度控制中心','检修分公司','党委办公室','发展策划部','人力资源部','财务资产部',
                    '运维检修部','监察审计部','党建工作部','民能公司','城区供电所','侣俸供电所','平滩供电所','永嘉供电所','安居供电所',
                    '旧县供电所','蒲吕供电所','虎峰供电所','少云供电所','大庙供电所'],
                dialog: {
                    title: '',
                    top: '10vh',
                    show: false,
                    width: '500px'
                },
                dateTime: '',
            }
        },
        activated(){
            this.list();
            this.repairs();
        },
        computed: {
            ...mapGetters(['active','loading']),
        },
        methods: {
            repairs() {
                UserRepairs().then((res) => {
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.repairsArr = res.data;
                    }
                });
            },
            download(){
                window.location.href = 'http://saleapi.cetui.cn/manage/download';
            },
            imports(){
                if(this.dateTime){
                    var start = this.moment(this.dateTime[0]).format('YYYY-MM-DD');
                    var stop = this.moment(this.dateTime[1]).format('YYYY-MM-DD');
                }else{
                    this.$message.error('请选择要导出数据的时间区间段');return false;
                }
                window.location.href = 'http://saleapi.cetui.cn/manage/import?start='+start+'&stop='+stop;
            },
            //筛选
            search(){
                this.params.page = 1;
                if(this.dateTime){
                    this.params.start = this.moment(this.dateTime[0]).format('YYYY-MM-DD');
                    this.params.stop = this.moment(this.dateTime[1]).format('YYYY-MM-DD');
                }else{
                    this.params.start = '';
                    this.params.stop = '';
                }
                this.list();
            },
            //列表
            list(){
                this.$store.dispatch('setLoading', true);
                OrderList({params: this.params}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.listData = res.data;
                    }
                    this.$store.dispatch('setLoading', false);
                })
            },
            edit(id){
                this.$router.push({name:'OrderInfo',query:{id:id}})
            },
            //删除
            destory(id){
                this.$confirm('确定要删除该订单信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    OrderDestroy({id: id}).then((res) => {
                        if (res.code) {
                            this.$message.error(res.msg);
                        } else {
                            this.list();
                        }
                    });
                }).catch(() => {});
            },
        }
    }
</script>

<style scoped>

</style>
